<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>统计柱状图</title>
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    	<link href="${pageContext.request.contextPath}/css/style.min.css?v=4.0.0" rel="stylesheet">
		<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
		<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
	</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <!-- <span class="label label-success pull-right">月</span> -->
                        <h5>总订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins orderQuantity"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>完成订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins completeOrderQuantity"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>总金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins transactionAmount"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>平台金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins platFormAmount"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>商家金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins companyAmount"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>短运司机金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins driverAmount"></h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>中云通用户数量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins zytWxUsers">106,120</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>短运司机用户数量</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins shortDriverUsers">106,120</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:25px;">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>总订单统计表</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <div type="button" class="btn btn-xs btn-white active" data-type="day" onclick="type('day')">天</div>
                                <div type="button" class="btn btn-xs btn-white" data-type="month" onclick="type('month')">月</div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="background: #fff;">
						 <div style="width:1600px; margin:20px auto 0;">
						   <div id="char" style="width: 1600px;
							height:400px;
							margin:20px auto 0;"></div>
					    </div>
					</div>
                </div>
            </div>
        </div>
		<div class="row" >
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>金额统计表</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <div type="button" class="btn btn-xs btn-white active" data-type="day" onclick="check('day')" >天</div>
                                <div type="button" class="btn btn-xs btn-white" onclick="check('month')">月</div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="background: #fff;">
						 <div style="width:1600px; margin:20px auto 0;">
						   <div id="chart" style="width: 1600px;
							height:400px;
							margin:20px auto 0;"></div>
					    </div>
					</div>
                </div>
            </div>
        </div>
    </div>
	<script>
    	var myChar = echarts.init(document.getElementById('char'));
		var dayXData = [];
		var monthXData = [];
		var daydriver = [];
		var dayorder = [];
		var monthdriver = [];
		var monthorder = [];
		var myChart = echarts.init(document.getElementById('chart'));
		var dayXData2 = [];
		var monthXData2 = [];
		var daydriver2 = [];
		var dayorder2 = [];
		var dayplat2 = [];
		var daytran2 = [];
		var monthdriver2 = [];
		var monthorder2 = [];
		var monthplat2 = [];
		var monthtran2 = [];
		option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#999'
		            }
		        }
		    },
		    toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar']},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    legend: {
		        data:['总订单']
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisPointer: {
		                type: 'shadow'
		            },
		        axisLabel : {
	                interval:0,
	                rotate:"45"
	            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: '总订单统计表',
		            axisLabel: {
		                formatter: '{value}'
		            }
		        }
		    ],
		    series: [
		        {
		            name:'总订单',
		            type:'bar',
		            color:'#B3F7E9',
		            barWidth: 30
		        }  
		    ]
		};
		option2 = {
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },
			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        data:['平台成交金额','公司成交金额','司机成交金额']
			    },
			    xAxis: [
			        {
			            type: 'category',
			            axisPointer: {
			                type: 'shadow'
			            },
			        axisLabel : {
		                interval:0,
		                rotate:"45"
		            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '金额统计表',
			            axisLabel: {
			                formatter: '{value}'
			            }
			        }
			    ],
			    series: [
			        {
			            name:'平台成交金额',
			            type:'bar',
			            barWidth: 30
			        },
			        {
			            name:'公司成交金额',
			            type:'bar'
			        },
			        		        {
			            name:'司机成交金额',
			            type:'bar'
			        }
			    ]
			};
		window.onload = function(){
			$.ajax({
			        url: '../webda/getDayOrMonthOrders.htm',
			        type: 'get',
			        data: {'dayOrMonth':'day'},
			        dataType:'json',
			        success: function (result) {	
					        		var data = result.data;
					        		for(var i=0; i<data.length; i++){
					        			dayXData.push(data[i].dateColumnName); 
				                        dayorder.push(data[i].orderQuantity); 
				        			}
				        		option.xAxis[0].data = dayXData;
								option.series[0].data = dayorder;
								myChar.setOption(option);
				        }
				    })
				    $.ajax({
			        url: '../webda/getDayOrMonthAmount.htm',
			        type: 'get',
			        data: {'dayOrMonth':'day'},
			        dataType:'json',
			        success: function (result) {
					        		var data = result.data;
					        		for(var i=0; i<data.length; i++){
					        			dayXData2.push(data[i].dateColumnName); 
				                        dayplat2.push(data[i].platFormAmount); 
				                        dayorder2.push(data[i].companyAmount); 
				                        daydriver2.push(data[i].driverAmount); 
				        			}
				        		option2.xAxis[0].data = dayXData2;
								option2.series[0].data = dayplat2;
								option2.series[1].data = dayorder2;
								option2.series[2].data = daydriver2;
								
								myChart.setOption(option2);
				        }
				    })
				    $.ajax({
			        url: '../webda/getOrderItemsTransactionAmount.htm',
			        type: 'get',
			        dataType:'json',
			        success: function (result) {	
			        	
			        	 $(".orderQuantity").html(result.data.orderQuantity);
			        	 $(".completeOrderQuantity").html(result.data.completeOrderQuantity);
			        	 $(".transactionAmount").html(result.data.transactionAmount);
			        	 $(".platFormAmount").html(result.data.platFormAmount);
			        	 $(".companyAmount").html(result.data.companyAmount);
			        	 $(".driverAmount").html(result.data.driverAmount);
				        }
				    })
				    $.ajax({
			        url: '../webda/getWxUserAndShorDrivers.htm',
			        type: 'get',
			        dataType:'json',
			        success: function (result) {	
			        	
			        	 $(".zytWxUsers").html(result.data.zytWxUsers);
			        	 $(".shortDriverUsers").html(result.data.shortDriverUsers);
				        }
				    })
			
		};
		function type(n) {
			if (n == 'day') {
				dayXData.splice(0,dayXData.length);
				dayorder.splice(0,dayorder.length);
				$.ajax({
			        url: '../webda/getDayOrMonthOrders.htm',
			        type: 'get',
			        data: {'dayOrMonth':'day'},
			        dataType:'json',
			        success: function (result) {	
					        		var data = result.data;
					        		for(var i=0; i<data.length; i++){
					        			dayXData.push(data[i].dateColumnName); 
				                        dayorder.push(data[i].orderQuantity); 
				        			}
				        		option.xAxis[0].data = dayXData;
								option.series[0].data = dayorder;
								
								myChar.setOption(option);
				        }
				    })
			} else {
				monthXData.splice(0,monthXData.length);
				monthorder.splice(0,monthorder.length);
				$.ajax({
			        url: '../webda/getDayOrMonthOrders.htm',
			        type: 'get',
			        data: {'dayOrMonth':'month'},
			        dataType:'json',
			        success: function (result) {	
					        		var data = result.data;
					        		for(var i=0; i<data.length; i++){
					        			monthXData.push(data[i].dateColumnName); 
				                        monthorder.push(data[i].orderQuantity); 
				        			}
				        		option.xAxis[0].data = monthXData;
								option.series[0].data = monthorder;
								myChar.setOption(option);
				        }
				    })
			    
			}
		}
		function check(n) {
			if (n == 'day') {
				dayXData2.splice(0,dayXData2.length);
				daydriver2.splice(0,daydriver2.length);
				dayorder2.splice(0,dayorder2.length);
				dayplat2.splice(0,dayplat2.length);
				$.ajax({
			        url: '../webda/getDayOrMonthAmount.htm',
			        type: 'get',
			        data: {'dayOrMonth':'day'},
			        dataType:'json',
			        success: function (result) {	
					        		var data = result.data;
					        		for(var i=0; i<data.length; i++){
					        			dayXData2.push(data[i].dateColumnName); 
				                        dayplat2.push(data[i].platFormAmount); 
				                        dayorder2.push(data[i].companyAmount); 
				                        daydriver2.push(data[i].driverAmount); 
				        			}
				        		option2.xAxis[0].data = dayXData2;
								option2.series[0].data = dayplat2;
								option2.series[1].data = dayorder2;
								option2.series[2].data = daydriver2;
								
								myChart.setOption(option2);
				        }
				    })
			} else {
				monthXData2.splice(0,monthXData2.length);
				monthdriver2.splice(0,monthdriver2.length);
				monthorder2.splice(0,monthorder2.length);
				monthplat2.splice(0,monthplat2.length);
				$.ajax({
			        url: '../webda/getDayOrMonthAmount.htm',
			        type: 'get',
			        data: {'dayOrMonth':'month'},
			        dataType:'json',
			        success: function (result) {	 
					        		var data = result.data;
					        		for(var i=0; i<data.length; i++){
					        			monthXData2.push(data[i].dateColumnName); 
					        			monthplat2.push(data[i].platFormAmount); 
					        			monthorder2.push(data[i].companyAmount); 
					        			monthdriver2.push(data[i].driverAmount); 
				        			}
				        		option2.xAxis[0].data = monthXData2;
								option2.series[0].data = monthplat2;
								option2.series[1].data = monthorder2;
								option2.series[2].data = monthdriver2;
								
								myChart.setOption(option2);
				        }
				    })
			    
			}
		}
	</script>
</body>
</html>